<template>
	<view class="all" :style="{
			height: $height()+'px',
			'background-color': '#F4F4F4'
	}">
		<u-navbar :is-back="true" title="購買商品" title-bold :background="background" />

		<view class="carp1">
			<text>訂單信息</text>
			<text>訂單狀態：待支付</text>
			<text> 訂單編號：sp56666552 </text>
			<text>訂單時間：2021.02.01</text>
		</view>

		<view class="carp" @click="$to('/pages/shopping/replace')">
			<view class="carp_1">
				<view class="carp_1_2">
					<text>彭於晏</text>
					<text>16703711571</text>
				</view>
				<view class="carp_1_3">
					河南省 鄭州市 金水區 大江路街道川江路路口 南100米
				</view>
			</view>
			<image src="@/static/you.png" style="width: 11rpx;height: 22rpx;" />
		</view>
		<view class="carptwo">
			<text class="top">商品信息</text>
			<view class="top_1">
				<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164664724077095.png" />
				<view class="top_2">
					<text class="top_2_t">拉菲(LAFITE)傳奇波爾多 赤霞珠 幹紅葡萄酒 750ml*6瓶</text>
					<text class="top_2_t1">規格：拉菲傳奇波爾多一瓶禮盒裝</text>
					<view class="top_2_1">
						<text>
							<label style="font-size: 20rpx;">￥</label>
							249.00</text>
						<text>x1</text>
					</view>
				</view>

			</view>
			<view class="xian">

			</view>
			<view class="yh" @click="show=true">
				<text>優惠券</text>
				<view class="yh1">
					<text>請選擇優惠券</text>
					<image src="../../static/you.png"></image>
				</view>

			</view>

		</view>

		<!-- //优惠券 -->
		<u-popup v-model="show" mode="bottom">
			<view class="warp">
				<view class="warp_carp" @click="xy=index" :style="{
				'background-image': $img(
				xy==index?
				'https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672485597817.png'
				:'https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164672505290678.png'
				)
				 }" v-for="(item,index) in 5">
					<view class="warp_carp_1">
						<view class="warp_carp_1_1">
							<text>￥</text>
							<text>5元</text>
							<text>優惠券</text>
						</view>
						<view class="warp_carp_1_2">
							有效期：2021.05.21-2021.06.30
						</view>
					</view>
					<!-- 	<view class="warp_carp_2">
						<text>立即</text>
						<text>兌換</text>
					</view> -->
				</view>
				<view class="warp_foot">
					<text @click="show=false">取消返回</text>
					<text>確認選擇</text>
				</view>
			</view>
		</u-popup>
		<!-- 支付 -->
		<view class="foot safe-area-inset-bottom">
			<view class="foot_1">
				<text>金額:</text>
				<text>￥</text>
				<text>548.00</text>
				<!-- <text class="yh">（50元優惠券）</text> -->
			</view>
			<!-- 未支付,待发货,代签收 -->
			<!-- <text class="play" @click="submit">支付</text> -->
			<!-- 已支付 -->
			<view class="yplay">
				<text class="play1"
				 @click="$to('/pagesA/comment/comment')"
				>去評論</text>
				<text class=" play2" @click="submit">已支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				xy: 0
			};
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: '/pages/shopping/playsucess'
				})
			}
		}

	}
</script>

<style lang="scss">
	.foot {
		position: fixed;
		min-height: 100rpx;
		padding-top: 20rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: white;
		padding-left: 30rpx;
		padding-right: 30rpx;
		bottom: 0;

		.yplay {
			display: flex;

			.play1 {
				margin-right: 15rpx;
				width: 160rpx;
				height: 80rpx;
				background: #00795E;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				display: inline-block;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			.play2 {
				width: 160rpx;
				height: 80rpx;
				background: #00795E;
				border-radius: 40rpx;
				line-height: 80rpx;
				opacity: 0.5;
				text-align: center;
				display: inline-block;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.play {
			display: block;
			width: 218rpx;
			height: 80rpx;
			background: #00795E;
			text-align: center;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}

		.foot_1 {
			text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #AB1E25;
			}

			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #AB1E25;
				margin-left: 10rpx;
			}

			text:nth-of-type(3) {
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #AB1E25;
				margin-right: 10rpx;
			}

			.yh {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #AB1E25;
			}
		}

	}

	.warp {
		height: 953rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 100rpx 30rpx;
		position: relative;
		overflow: hidden;
		overflow: auto;

		.warp_foot {
			display: flex;
			justify-content: space-around;
			width: 100%;
			position: fixed;
			align-items: center;
			background-color: white;
			height: 100rpx;
			bottom: 0rpx;
			left: 0;

			text:nth-of-type(1) {
				display: block;
				width: 335rpx;
				text-align: center;
				line-height: 80rpx;
				height: 80rpx;
				background: #FFFFFF;
				border: 1rpx solid #00795E;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #00795E;
				border-radius: 40rpx;
			}

			text:nth-of-type(2) {
				width: 335rpx;
				height: 80rpx;
				background: #00795E;
				border-radius: 40rpx;
				text-align: center;
				;
				line-height: 80rpx;
				height: 80rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.warp_carp {
			height: 201rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 50rpx;

			background-size: 100% 100%;
			background-repeat: no-repeat;

			.warp_carp_2 {
				margin-right: 45rpx;

				text:nth-of-type(1) {
					display: block;
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #00795E;
					opacity: 0.9;
				}

				text:nth-of-type(2) {
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #00795E;
					opacity: 0.9;
				}
			}

			.warp_carp_1_2 {
				font-size: 22rpx;
				font-family: Source Han Serif CN;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.7;
				margin-top: 5rpx;
			}

			.warp_carp_1 {
				text:nth-of-type(1) {
					font-size: 30rpx;
					font-family: SourceHanSerifCN-Bold;
					font-weight: bold;
					color: #FFFFFF;
				}

				text:nth-of-type(2) {
					font-size: 60rpx;
					font-family: SourceHanSerifCN-Medium;
					font-weight: bold;
					color: #FFFFFF;
					margin: 0 5rpx 0 5rpx;
				}

				text:nth-of-type(3) {
					font-size: 30rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	.all {
		min-height: 1350rpx;
		background-color: #F4F4F4;
		padding-top: 30rpx;

		.carptwo {
			position: relative;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			width: 92%;
			margin: auto;

			.yh {
				padding-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #333333;
				}

				.yh1 {
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #999999;
						margin-right: 20rpx;
					}
				}

				image {
					width: 11rpx;
					height: 21rpx;
				}
			}

			.xian {
				height: 1px;
				background: #EDEDED;
			}

			.top_1 {
				display: flex;
				margin-top: 25rpx;
				margin-bottom: 40rpx;
				justify-content: space-between;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.top_2 {
				width: 65%;
				position: relative;

				.top_2_1 {
					position: absolute;
					width: 100%;
					right: 0;
					bottom: 0rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text:nth-of-type(1) {
						font-size: 30rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: Source Han Serif CN;
						font-weight: 500;
						color: #999999;
					}
				}

				.top_2_t {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #181818;
				}

				.top_2_t1 {
					display: block;
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #999999;
				}
			}

			.top {
				font-size: 32rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #181818;
			}
		}

		.carp1 {
			padding: 30rpx;
			position: relative;
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			text {
				display: block;
			}

			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #181818;
				margin-bottom: 10rpx;
			}

			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
			}

			text:nth-of-type(3) {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				margin-top: 15rpx;
				color: #666666;
			}

			text:nth-of-type(4) {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				margin-top: 15rpx;
				color: #666666;
			}
		}

		.carp {
			padding: 30rpx;
			position: relative;
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			background-image: url(https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164664691317430.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.img {
				position: absolute;
				bottom: 0;
				left: 0;
			}

			.carp_1 {
				width: 80%;

				.carp_1_3 {
					margin-top: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #666666;
					line-height: 42rpx;
				}

				.carp_1_2 {
					text:nth-of-type(1) {
						font-size: 36rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
					}

					text:nth-of-type(2) {
						margin-left: 30rpx;
						font-size: 30rpx;
						font-family: Source Han Serif CN;
						font-weight: 600;
						color: #181818;

					}
				}

			}

		}
	}
</style>
